.page-package-details {
  .no-border {
    border: 0;
  }

  h1 {
    margin-bottom: 0;
  }

  tr {
    border-bottom: 1px solid lightgray;
  }

  .package-title {
    margin-bottom: 24px;

    div {
      margin-top: 2px;
    }

    .reserved-indicator {
      width: 25px;
    }
  }

  .deprecation-container {
    .deprecation-expander {
      display: flex;
      justify-content: space-between;
      vertical-align: middle;
      width: 100%;

      .deprecation-expander-container {
        display: flex;

        .deprecation-expander-icon {
          position: unset;
          top: unset;
        }

        .deprecation-expander-info-right {
          padding-left: 15px;
        }

        .deprecation-expander-severity-rating {
          margin-left: 5px;
        }
      }
    }

    .deprecation-content-container {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid lightgray;

      p {
        margin-top: 5px;
      }

      p:last-of-type {
        margin-bottom: 0px;
      }
    }
  }

  .vulnerabilities-container {
    .vulnerabilities-expander {
      display: flex;
      justify-content: space-between;
      vertical-align: middle;
      width: 100%;

      .vulnerabilities-expander-container {
        display: flex;

        .vulnerabilities-expander-icon {
          position: unset;
          top: unset;
        }

        .vulnerabilities-expander-info-right {
          padding-left: 15px;
        }
      }
    }

    .vulnerabilities-content-container {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid lightgray;

      .vulnerabilities-list {
        border-collapse: unset;
      }
    }

    .vulnerabilities-severity-critical {
      color: red
    }

    .vulnerabilities-severity-high {
      color: red
    }

    .vulnerabilities-severity-moderate {
      color: blue
    }
  }

  .failed-validation-alert-list {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .package-details-main {
    .break-word;

    .package-icon-cell {
      cursor: default;
      padding-left: 0;
      padding-right: 0;
      text-align: right;

      .package-icon {
        padding-left: 6px;
        padding-right: 6px;
      }
    }
  }

  .package-details-info {
    .ms-Icon-ul {
      li {
        margin-bottom: 15px;
      }

      img.icon {
        position: absolute;
        left: -24px;
        width: 16px;
        height: 16px;
        margin-top: 3px;
      }
    }
  }

  .owner-list {
    li {
      margin-bottom: 8px;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    img {
      margin-right: 8px;
    }
  }

  .share-buttons {
    img {
      margin-right: 8px;
      display: inline-block;
    }
  }

  .used-by-desc {
    font-family: @font-family-base;
    font-size: 14px;
    color: #333333;
    margin: 4px 0 0 0;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 16px;
    /* fallback */
    max-height: 32px;
    /* fallback */
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
  }

  .used-by-link {
    font-family: @font-family-base;
    font-size: 16px;
    line-height: 19px;
    color: @brand-primary;
    width: auto;
  }

  .gh-link, .ngp-link {
    font-family: @font-family-base;
    font-size: 16px;
    line-height: 19px;
    color: @brand-primary;
    width: auto;
  }

  .used-by-download-icon {
    font-size: 14px;
    line-height: 12px;
  }

  .used-by-count {
    font-family: @font-family-base;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #586069;
  }

  .gh-star {
    font-size: 14px;
    line-height: 12px;
    /* Use a slightly darker orange color to increase contrast for accessibility */
    color: darken(@brand-warning, 4.5%);
  }

  .used-by {
    h3 {
      strong {
        font-weight: 400;
      }
    }

    .reserved-indicator {
      width: 14px;
      margin-bottom: 3px;
      margin-left: 2px;
      vertical-align: middle;
    }
  }

  .used-by-adjust-table-head {
    word-break: normal;
  }

  .used-by-desc-column {
    width: 85%;
  }

  .install-tabs {
    font-size: 0.8em;

    ul {
      margin-left: 0;
    }

    .nav-tabs {
      border: 0;

      > li {
        margin-right: 5px;
        padding: 0;
        margin-bottom: 0;

        > a {
          color: @text-color;
          background-color: #eaeaea;
          border: 0;
          padding: 5px 10px;
          margin: 0;
        }
      }
    }

    .nav-tabs > li.active > a {
      background-color: @panel-footer-bg;
      border: 0;
      color: #fff;
      font-weight: 600;
      text-decoration: underline;
    }

    .tab-content {
      .tab-pane {
        > div {
          display: table;
          height: 1px;
        }

        .install-script-row {
          display: table-row;
          height: 100%;

          .install-script {
            display: table-cell;
            background-color: @panel-footer-bg;
            font-family: @font-family-monospace;
            font-size: 1em;
            color: #fff;
            width: 100%;
            max-width: 1px;
            line-height: 1.5;
            white-space: pre-wrap;
            // Add a border with the same color as the background to support visual callout
            // in high contrast mode (since borders are shown).
            border-color: @panel-footer-bg;
            border-style: solid;
            border-width: 1px 0 1px 1px;
            user-select: all;
            vertical-align: middle;
          }

          .copy-button {
            height: 100%;

            button {
              height: 100%;
              min-height: 42px;
              line-height: 1.5;
            }
          }
        }

        .alert {
          margin: 0;
          width: 100%;
        }
      }
    }
  }
}
